<template>
    <view>
        <view :class="[isFixed?'f-fixed':'']" style="z-index: 99999;">
			
			<block v-if="userInfo && userInfo.token">
				<edit-avatar :show="editAvatarShow" @close="editAvatarShow = false"></edit-avatar>
			</block>
			<view class="floatbtn" @click="hedlegetfabu">
				<img src="/static/public/fabu.png" mode=""></img>
			</view>
            <!-- 二次封装tabbar -->
            <u-tabbar
            	:value="tabIndex"
            	@change="onTabbar"
            	:fixed="false"
            	:placeholder="false"
            	:safeAreaInsetBottom="safeAreaInsetBottom"
                :activeColor="activeColor || PrimaryColor"
                :inactiveColor="inactiveColor"
                :border="border"
            >   
                <block v-for="(item,index) in list" :key="index">
                    <!-- 自定义icon -->
                    <u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
                        <view slot="active-icon">
                            <!-- <view class="custom-icon" :class="['custom-icon-'+item.iconFill]" style="font-size: 20px;" :style="{color:activeColor || PrimaryColor}"></view> -->
                            <!-- 自定义图标 -->
							<!-- <f-icon :name="item.iconFill" size="40" :color="activeColor || PrimaryColor"></f-icon> -->
							<!-- 图片路径 -->
							<image class="icon" :src="item.iconFill"></image>
						</view>
                        <view slot="inactive-icon">
                            <!-- <view class="custom-icon" :class="['custom-icon-'+item.icon]" style="font-size: 20px;" :style="{color:inactiveColor}"></view> -->
                            <!-- 自定义图标 -->
							<!-- <f-icon :name="item.icon" size="40" :color="inactiveColor"></f-icon> -->
							<!-- 图片路径 -->
							<image class="icon" :src="item.icon"  ></image>
                        </view>
                    </u-tabbar-item>
                </block>
            </u-tabbar>
            <!-- 苹果安全距离-默认20px -->
            <view :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',background:'#fff'}"></view>
        </view>
        <!-- 防止塌陷高度 -->
        <view v-if="isFixed && isFillHeight" :style="{height:systemInfo.tabbarH+'px'}"></view>
		<!-- #ifdef H5 -->
		<u-safe-bottom></u-safe-bottom>
		<!-- #endif -->
		<!-- 完善头像和昵称 -->
	
	
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import base from '@/config/baseUrl.js';
import editAvatar from '@/components/pagesCircle/editAvatar/index.vue';
export default {
    name: 'f-tabbar',
    props:{
        // 是否固定在底部
        isFixed:{
            type:Boolean,
            default:true,
        },
        // 是否设置防止塌陷高度
        isFillHeight:{
            type:Boolean,
            default:true,
        },
        // 选中的颜色--为空显示主题色
        activeColor:{
            type:String,
            default:'#866637',
        },
        // 未选中颜色
        inactiveColor:{
            type:String,
            default:'#606266',
        },
        // 是否显示边框色
        border:{
            type:Boolean,
            default: function() {
        		return true;
        	}
        },
        // 右上角的角标提示信息
        badge: {
            type: [String, Number, null],
            default: uni.$u.props.tabbarItem.badge
        },
        // 是否显示圆点，将会覆盖badge参数
        dot: {
            type: Boolean,
            default: uni.$u.props.tabbarItem.dot
        },
        // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
        badgeStyle: {
            type: [Object, String],
            default: uni.$u.props.tabbarItem.badgeStyle
        }
    },
	computed:{
	    ...mapState(['PrimaryColor','userInfo']),
	
	},
    data(){
        return {
			safeAreaInsetBottom:false,
            systemInfo:base.systemInfo,
            tabIndex:0,
            path:'', //当前路径
			editAvatarShow:false,
            list:[{ 
                name: '首页',
                url: 'pages/index/index',
                icon: '/static/public/home.png',
                iconFill: '/static/public/home1.png',
			
				
            },
            {
                name: '出行',
                url: 'pages/sojourn/sojourn',
                icon: '/static/public/lvju.png',
                iconFill: '/static/public/lvju1.png'
                //badge: 16
            },
			{
				// icon: "https://cdn.uviewui.com/uview/common/min_button.png",
				// iconFill: "https://cdn.uviewui.com/uview/common/min_button_select.png",
				// name: '',
				// midButton: true,
				// customIcon: false,
			},
            {
                name: '圈子',
                url: 'pages/circle/circle',
                icon: '/static/public/circle.png',
                iconFill: '/static/public/circle1.png',
                //dot: true
            },
            {
                name: '我的',
                url: 'pages/my/myInfo',
                icon: '/static/public/people.png',
                iconFill: '/static/public/people1.png',
                //dot: true
            }]
        }
    },
	components: {
	
		editAvatar,
	},
    created() {
    	//获取页面路径
    	let currentPages = getCurrentPages();
    	let page = currentPages[currentPages.length - 1];
    	this.path = page.route;
        //获取页面路径
        this.list.forEach((item,index)=>{
            if(this.path == item.url){
                this.tabIndex = index
            }
        })
		// #ifdef H5
		this.safeAreaInsetBottom = true
		// #endif
    },
    methods:{
        onTabbar(index){
            if (this.path !== this.list[index].url) {
            	uni.switchTab({
            		url: '/' + this.list[index].url
            	});
            }
        },
		//发布
		hedlegetfabu() {
			if (!this.userInfo.token) {
				this.judgeLogin(() => {});
				return false;
			} else {
				//获取头像和昵称 都存在才能发布
				this.$circleApi.postUsernicknameandavatar().then(res=>{	
					if(res.usename && res.uphoto){
						
						 this.onTokenJump('/pagesCircle/publish/index')
					}else{
						//完善昵称和头像
						this.editAvatarShow = true
					}
								
				}).catch(err=>{
								 
				})
				
			}
		},
    }
}
</script>

<style lang="scss" scoped>
	
	.floatbtn {
		color: #fff;
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -10px;
		z-index: 999999;
		border-radius: 61rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-end;
		// background-color: #F1A9BE;
	}
	
	.floatbtn img {
		width: 120rpx;
		height: 120rpx;
	}
.f-fixed{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
	.icon{
	    width: 70rpx;
	    height: 70rpx;
	}
}
</style>
